<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <!-- Bootstrap -->
    <link href="../../css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap select component -->
    <link href="../../css/select/bootstrap-select.css" rel="stylesheet">
    <!-- Ace editor -->
    <style type="text/css" media="screen">
        .ace_editor {
            position: relative !important;
            border: 1px solid lightgray;
            margin: auto;
            height: 100%;
            width: 100%;
        }
    </style>

    <!-- Ace editor -->
    <script src="../../js/ace/src-noconflict/ace.js"></script>
    <!-- Bootstrap select component -->
    <script src="../../js/select/bootstrap-select.js"></script>

    <script type="text/javascript">
        function send() {
            var form = $("#request_Form");
            $.ajax({
                type: "post",
                data: form.serialize(),
                url: form.attr('action'),
                success: function (response) {
                    $("#responseContainer").html(response)
                }
            });
        }
    </script>

</head>
<body>
<h5>Project / Folder / Method</h5>
<form:form id="request_Form" action="request/send.htm" modelAttribute="requestForm">

    <!-- Url and type request (POST/GET...) -->
    <div class="input-group">
        <form:input path="url" cssClass="form-control input-sm" placeholder="Url"/>

        <div class="input-group-btn">
            <select class="input-sm pull-right">
                <option>POST</option>
                <option>GET</option>
            </select>
        </div>
    </div>

    <!-- Option Buttons (Headers, Auth...) -->
    <p></p>

    <div>
        <select id="environment" class="selectpicker show-tick" data-width="auto" data-style="btn btn-default btn-sm">
            <option selected>Non environment</option>
            <option>Test</option>
            <option>Production</option>
            <option data-divider="true"></option>
            <option>Manage</option>
        </select>
        <span class="glyphicon glyphicon-zoom-in"></span>

        <div class="pull-right">
            <button type="button" class="btn btn-default btn-sm">
                <span class="glyphicon glyphicon-lock"></span> Auth
            </button>
            <button type="button" class="btn btn-default btn-sm">
                <span class="glyphicon glyphicon-list"></span> Headers
            </button>
            <button type="button" class="btn btn-default btn-sm">
                <span class="glyphicon glyphicon-list"></span> Url Params
            </button>
        </div>
    </div>
    <p></p>

    <p></p>

    <div>
        <div class="btn-group pull-center">
            <select id="typeRaw" class="selectpicker pull-left" data-width="auto" data-style="btn btn-default btn-xs">
                <option selected>raw: xml </option>
                <option>raw: json </option>
                <option>raw: text </option>
            </select>
            <button type="button" class="btn btn-default btn-xs">form-data</button>
            <button type="button" class="btn btn-default btn-xs">x-www-form-urlencoded</button>
        </div>
    </div>
    <!-- XML Editor -->
    <div id="xmlEditor">
    </div>

    <p></p>
    <!-- Action buttons (Send / Clear..) -->
    <button type="button" class="btn btn-success btn-sm" onclick="send()">
        <span class="glyphicon glyphicon-play"></span> Run
    </button>
    <button type="button" class="btn btn-primary btn-sm">
        <span class="glyphicon glyphicon-check"></span> Assertions
    </button>
    <span class="glyphicon glyphicon-zoom-in"></span>


    <div class="btn-group pull-right">
        <button type="button" class="btn btn-default btn-sm">Clear</button>
        <button type="button" class="btn btn-default btn-sm">
            <span class="glyphicon glyphicon-floppy-disk"></span> Save
        </button>
        <button type="button" class="btn btn-default btn-sm">
            <span class="glyphicon glyphicon-plus"></span> Add to project
        </button>
    </div>
</form:form>


<script>
    var editor = ace.edit("xmlEditor");
    editor.setTheme("ace/theme/chrome");
    editor.session.setMode("ace/mode/xml");
    editor.getSession().setTabSize(3);
    editor.setAutoScrollEditorIntoView(true);
    editor.setOption("showLineNumbers", false);
    editor.setShowPrintMargin(false);
    editor.setOption("maxLines", Infinity);
    editor.setOption("minLines", 23);

    $('.selectpicker').selectpicker();

</script>

</body>
</html>
